<template>
	<view class="status-bar" :style="'background:'+bgColor">
		<view class="status-bar-height" :style="{ height: statusBarHeight }"></view>
		<view class="status-bar-title " style="height: 44px;">
			<view class="left-icon iconfont icon-back" style="" @click="onClickLeft"></view>
			<view class="title" style="font-size: 32rpx;" v-if="isList==0">{{title}}</view>
			<view class=" box d-a-center text-a list-top d-j-bet" v-if="isList==1">
				<text class=" d-center change-box" v-for="(item,index) in menuList" :key="index"
				v-if="item.id==active"
					:class="item.id==active?'co-l back3':'co-white'" @click="changeList(index)">
					{{item.title}}
				</text>
			</view>
			<view class="">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 文字标题
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			isList: {
				type: String,
				default: ''
			},
			active: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				statusBarHeight: 20,
				menuList: [{
					title: '护士',
					id: 1
				}, {
					title: '用户',
					id: 2
				}, ],
				active: 0,
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
		},
		methods: {
			changeList(index) {
				// this.active = index
				// 向上一个页面传递索引，用来区分护士和用户，0是护士，1是用户
				this.$emit('sendIndex', index)
			},
			onClickLeft() {
				// 默认是返回到上个页面可以添加个标识是吧
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.status-bar {
		z-index: 2;
		background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/bc97ef17e0014c6b.png');
		.status-bar-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-size: 100%;
			background-repeat: no-repeat;

			.left-icon {
				font-size: 60rpx;
				padding-left: 5%;
				color: #ffffff !important;
			}

			.title {
				padding-right: 13%;
				font-size: 35rpx;
				font-family: SFProDisplay-Medium, SFProDisplay;
				font-weight: 500;
				display: flex;
				align-items: center;
			}
		}
	}

	.list-top {
		width: 32%;
		height: 56rpx;
		// background: rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center;
		border-radius: 28rpx;
		padding: 0 0.5% 0 0.5%;
		// margin-right: 10%;
	}

	.change-box {
		width: 50%;
		height: 48rpx;
		border-radius: 24rpx;
	}
</style>